<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="ctx" value="${pageContext.request.contextPath }"/>
<link rel="stylesheet" href="${ctx }/resources/js/select2/select2.min.css"/>
<script type="text/javascript" src="${ctx }/resources/js/select2/select2.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/js/select2/zh-CN.js"></script>

<style>
    .iconShow {
        padding-left: 10px;
        padding-top: 3px;
    }

    .source-icon {
        width: 95%;
        float: left;
    }

    @media screen and (max-width: 374px) {
        .source-icon {
            width: 82%;
        }
    }

    @media screen and (min-width: 375px) and (max-width: 449px) {
        .source-icon {
            width: 85%;
        }
    }

    @media screen and (min-width: 450px) and (max-width: 1279px) {
        .source-icon {
            width: 90%;
        }
    }

    @media screen and (min_width: 1280px) {
        .source-icon {
            width: 90%;
        }
    }
</style>
<div class="page-header">
    <h1>
        <c:if test="${empty resourceEntity}">
            新增资源
        </c:if>
        <c:if test="${!empty resourceEntity}">
            编辑资源
        </c:if>
    </h1>
</div>
<div class="row" style="margin-top: 5px;">
    <div class="col-xs-12">
        <form id="resourceForm" name="resourceForm" class="form-horizontal" role="form" method="post">
            <c:if test="${!empty resourceEntity}">
                <input type="hidden" id="pageNum" name="pageNum" value="${page.pageNum }">
                <input type="hidden" id="pageSize" name="pageSize" value="${page.pageSize }">
                <input type="hidden" id="orderByColumn" name="orderByColumn" value="${page.orderByColumn }">
                <input type="hidden" id="orderByType" name="orderByType" value="${page.orderByType }">
                <input type="hidden" name="id" id="resourceId" value="${resourceEntity.id }">
                <input type="hidden" name="isHide" value="${resourceEntity.isHide }">
            </c:if>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="type">资源类型</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <select class="form-control" id="type" name="type"
                                style="width: 100%">
                            <option value="0"
                                    <c:if test="${resourceEntity.type eq 0 }">selected="selected"</c:if>>菜单
                            </option>
                            <option value="1"
                                    <c:if test="${resourceEntity.type eq 1 }">selected="selected"</c:if>>按钮
                            </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="name">上级名称</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <select class="form-control" name="parentId" id="parentId"
                                style="width: 100%">
                            <option></option>
                            <option value="0"
                                    <c:if test="${resourceEntity.parentId eq null}">selected="selected"</c:if>>目录菜单
                            </option>
                            <c:forEach var="item" items="${select2List }">
                                <option value="${item.id }"
                                        <c:if test="${resourceEntity.parentId eq item.id}">selected="selected"</c:if>>${item.text }</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="name">资源名称</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="name" id="name" type="text"
                               value="${resourceEntity.name }" placeholder="资源名称..."/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right"
                       for="sourceKey">资源标识</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="sourceKey" id="sourceKey"
                               type="text" value="${resourceEntity.sourceKey }"
                               placeholder="资源标识..."/>
                    </div>
                </div>
            </div>

            <!--
			<c:choose>
				<c:when test="${!empty resourceEntity}">
					<c:if test="${resourceEntity.parentId eq null}">style="display: none;"</c:if>
				</c:when>
				<c:otherwise>style="display: none;"</c:otherwise>
			</c:choose>
			 -->
            <div class="form-group" id="sourceUrlDiv">
                <label class="control-label col-sm-1 no-padding-right"
                       for="sourceUrl">资源URL</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="sourceUrl" id="sourceUrl"
                               type="text" value="${resourceEntity.sourceUrl }"
                               placeholder="菜单URL..."/>
                    </div>
                </div>
            </div>

            <!-- <c:if test="${resourceEntity.parentId ne null}">style="display: none;"</c:if> -->
            <div id="iconDiv" class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="icon">菜单图标</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control source-icon" name="icon" id="icon" type="text"
                               value="${resourceEntity.icon }" placeholder="请选择菜单图标..."/>
                        <i id="iconShow" data-rel="tooltip" data-placement="left" data-original-title="点击清除图标"
                           class="<c:if test="${fn:length(resourceEntity.icon) gt 0 }">${resourceEntity.icon } green fa-2x iconShow tooltip-success</c:if>"></i>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right"
                       for="description">资源描述</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="description" id="description"
                               type="text" value="${resourceEntity.description }"
                               placeholder="资源描述..."/>
                    </div>
                </div>
            </div>
        </form>
        <div class="hr hr-dotted"></div>
    </div>
</div>
<div class="center">
    <button id="btnAdd" type="button" class="btn btn-success btn-sm">
        <i class="fa fa-user-plus"></i>&nbsp;
        <c:if test="${empty resourceEntity}">
            添加
        </c:if>
        <c:if test="${!empty resourceEntity}">
            保存
        </c:if>
    </button>
    <button id="btnBack" type="button" class="btn btn-info btn-sm">
        <i class="fa fa-undo"></i>&nbsp;返回
    </button>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        initSourceType();
        initSourceTree();
        initIcon();
        initType();
        initButtonClick();
        validateResourceForm();
    });

    /**
     * 初始化select2
     */
    function initSourceType() {
        $('#type').select2({
            language: "zh-CN",
            minimumResultsForSearch: Infinity
        });
    }


    /**
     * 初始化选择资源树
     */
    function initSourceTree() {
        $('#parentId').select2({
            placeholder: "请选择上级资源...",
            language: "zh-CN",
            minimumResultsForSearch: Infinity,
            templateResult: function (state) {
                if (!state.id) {
                    return state.text;
                }
                var $state = $('<span><i class="fa fa-file-text-o green"></i>&nbsp;&nbsp;' + state.text + '</span>');
                return $state;
            },
            templateSelection: function (selection) {
                return $.trim(selection.text);
            }
        });
    }


    /**
     * 初始化图标页面
     */
    function initIcon() {
        $("#icon").bind('focus', function (event) {
            var iconLayer = layer.open({
                type: 2,
                scrollbar: false,
                content: sys.rootPath + '/resource/withoutAuth/icon.html',
                area: 'auto',
                maxmin: true,
                shift: 4,
                title: '<i class="fa fa-cogs"></i>&nbsp;选择图标'
            });
            //弹出即全屏
            layer.full(iconLayer);
        });
        $("#iconShow").bind('click', function (event) {
            $("#icon").val('');
            $(this).removeClass();
        });
        $('[data-rel=tooltip]').tooltip();
    }


    /**
     * 初始化父菜单选中
     */
    function initType() {
        $("#parentId").change(function () {
            var parentId = $.trim($(this).children('option:selected').val());
            if (parentId === null || parentId === '') {
                //$("#iconDiv").show();
                //$("#sourceUrlDiv").hide();
            } else {
                //$("#iconDiv").hide();
                //$("#sourceUrlDiv").show();
            }
        });
    }


    /**
     *  初始化绑定按钮事件
     */
    function initButtonClick() {
        $("#btnAdd").click(function () {
            $('#resourceForm').submit();
        });

        $("#btnBack").click(function () {
            movic.common.loadPage('/resource/listUI.html<c:if test="${!empty resourceEntity}">?page=${page.pageNum }&rows=${page.pageSize }&sidx=${page.orderByColumn }&sord=${page.orderByType }</c:if>');
        });
    }


    /**
     * 初始化表单验证
     */
    function validateResourceForm() {
        $('#resourceForm').validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            ignore: "",
            rules: {
                parentId: {
                    required: true
                },
                name: {
                    required: true
                },
                sourceKey: {
                    required: true
                },
                type: {
                    required: true
                },
                sourceUrl: {
                    required: function () {
                        /*
                         //仅目录菜单不需要url
                         var parentId = $.trim($("#parentId").val());
                         if (parentId == null || parentId == "") {
                         return false;
                         } else {
                         return true;
                         }
                         */
                        return false;
                    }
                },
                icon: {
                    required: function () {
                        /*
                         //仅目录菜单需要icon
                         var parentId = $.trim($("#parentId").val());
                         if (parentId == null || parentId == "") {
                         return true;
                         } else {
                         return false;
                         }
                         */
                        return false;
                    }
                }
            },
            messages: {
                parentId: "请选择上级资源",
                name: "请填写资源名称",
                sourceKey: "请填写资源标识",
                type: "请选择资源类型",
                sourceUrl: "请填写资源URL",
                icon: "请选择菜单图标"
            },
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if (controls.find(':checkbox,:radio').length > 1)
                        controls.append(error);
                    else
                        error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                } else if (element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                } else if (element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                } else
                    error.insertAfter(element.parent());
            },
            submitHandler: function (form) {
                var resourceId = $("#resourceId").val();
                var url = "";
                if (resourceId != undefined) {
                    url = '/resource/edit.html';
                } else {
                    url = '/resource/add.html';
                }
                movic.common.commit('resourceForm', url, '/resource/listUI.html');
            }
        });

    }

</script>